<title>Search</title>

{% load staticfiles %}
<head>
	<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}" />
	<link rel="stylesheet" type="text/css" href="{% static 'products/css/search.css' %}" />
	<script src='{% static "js/jquery-1.11.3.js" %}'></script>
	<script src='{% static "js/base.js" %}'> </script>


</head>
<html>
<body>
<div id='container'>
	<div id='top'>
		<div id='top-head'>
			<div id='title'>Hunter.com</div>
		</div>
		<div id='top-nav'>
			<ul id='menu'>
				<li id='menu-left'><a href='{% url "accounts:home" %}'><img src='{% static "images/home.png" %}'></a></li>
				<li id='menu-left'>Search</li>
				<li id='menu-search'>
					<form id='menu-search-form' method='post'>
						{% csrf_token %}
						<div id='menu-search-form-submit-div'><input type="image" id='menu-search-form-submit' src='{% static "images/search.png" %}'></input></div>
						<div id='menu-search-form-input-div'><input type='text' id='menu-search-form-input' name='search' placeholder='Search products...'></input></div>
					</form>
				</li>
				{% if login_check %}
					<li id='menu-right'>Welcome {{user_fname}}!</li>
					<li id='menu-right'><a href="{% url 'accounts:logout' %}">Logout</a></li>
				{% else %}
					<li id='menu-right'><a href="{% url 'accounts:login' %}">Login</a></li>
					<li id='menu-right'><a href="{% url 'accounts:make_new_user' %}">Register</a></li>
				{% endif %}
			</ul>
		</div>
	</div>
	<div id='main'>
		<div id='content'>
			<h1>Products</h1>
			<form class="form-horizontal" method="get">
				{% csrf_token %}
				<input type="text" name="sTerm" placeholder='Search products...'></input>
				<select name='sFilter'>
					<option value=''>Categories...</option>
					{% for category in categories %}
					<option>{{category}}</option>
					{% endfor %}    
				</select>
				<input type="submit" value="Go"></input>
			</form>
			<h4>{{number_of_results}}</h4>
			<div class=coloredbox>
				{% if not_empty %}	
				<script type="text/javascript" src="{% static 'products/js/sorttable.js' %}"></script>
				<table border="1" width="100%" class="sortable">
					<tr>   
						<th>Product</th>
						<th>Category</th>
						<th>Website</th>
						<th>Score</th>
						<th>Percentile</th>
						<th>Last updated</th>
					</tr>
					{% for product in product_value_vector %}
					<tr>
						<td id='name'><a href="{% url 'products:info' product.id %}">{{product.name}}</td>
						<td id='category'>{{product.category}}</td>
						<td id='website'>{{product.website}}</td>
						<td id='score'>{{product.score}}</td>
						<td id='percentile'>{{product.percentile}}</td>
						<td id='updateDate'>{{product.update_date}}</td>
					</tr>
					{% endfor %}
				</table>
				{% else %}
					<h4>{{notice}}</h4>
				{% endif %}
			</div>
		</div>
		<script>windowResize()</script>
	</div>
	<div id='foot'>
		created by 郝蕊 and Leonard Wainstein | designed by Gabriel Mickel<br>
		copyrighted: never! :)
	</div>
</div>
</body>
</html>